<template>
  <div class="ebook-bookmark" ref="bookmark">
    <div class="ebook-bookmark-text-wrapper">
      <div class="ebook-bookmark-down-wrapper" ref="iconDown">
        <span class="icon-arrowBottom-fill iconfont"></span>
      </div>
      <div class="ebook-bookmark-text">{{ text }}</div>
    </div>
    <div class="ebook-bookmark-icon-wrapper" :style="isFixed?fixedStyle:{}">
      <book-mark :color="color" :height="35" :width="15"></book-mark>
    </div>
  </div>
</template>

<script>
import {
  setLocalStorage,
  getLocalStorage,
  removeLocalStorage,
  saveFontFamily,
  getFontFamily,
  getBookmark,
  saveBookmark,
} from "../../utils/localStorage";

import { ebookMixin } from "../../utils/mixin";
import BookMark from "../common/BookMark.vue";
import { realPx } from "../../utils/utiles";
const BLUE = "#346cbc";
const WHITE = "#fff";
export default {
  mixins: [ebookMixin],
  components: {
    BookMark
  },
  computed: {
    height() {
      return realPx(35);
    },
    threshold() {
      return realPx(55);
    },
    fixedStyle(){
        return {
            position:"fixed",
            right:`${window.innerWidth-this.$refs.bookmark.clientWidth}`,
            top:0
        }
    }
  },
  watch: {
      isBookmark(isBookmark){
          if(isBookmark){
              this.color=BLUE
              this.isFixed=true
          }else{
              this.color=WHITE
              this.isFixed=false
          }
      },
    offsetY(v) {
        if(!this.bookAvailable||this.menuVisible||this.settingVisible>=0){
            return
        }
      if (v > this.height && v < this.threshold) {
          this.beforeHeight(v)
      } else if (v >= this.threshold) {
          this.AfterHeight(v)
      } else if (v > 0 && v < this.height) {
        this.Height()
      } else if(v===0){
          this.restore()
      }
    }
  },
  data() {
    return {
      text: "",
      color: WHITE,
      isFixed:false
    };
  },
  methods:{
      addBookmark(){
          this.bookmark=getBookmark(this.fileName)//存放书签的数组
          if(!this.bookmark){
              this.bookmark=[]
          }
          const currentLocation=this.currentBook.rendition.currentLocation()
          const cfibase=currentLocation.start.cfi.replace(/!.*/,'')
          const cfistart=currentLocation.start.cfi.replace(/.*!/,'').replace(/\)$/,'')
           const cfiend=currentLocation.end.cfi.replace(/.*!/,'').replace(/\)$/,'')
          const cfirange=`${cfibase}!,${cfistart},${cfiend})`
          this.currentBook.getRange(cfirange).then(range=>{
             const text=range.toString().replace(/\s\s/g,'')
             this.bookmark.push({
                 cfi:currentLocation.start.cfi,
                 text:text

             })
            saveBookmark(this.fileName,this.bookmark)
          })
      },
      removeBookmark(){
           const currentLocation=this.currentBook.rendition.currentLocation()
           const cfi=currentLocation.start.cfi
           this.bookmark=getBookmark(this.fileName)
           if(this.bookmark){
               saveBookmark(this.fileName,this.bookmark.filter(item=>item.cfi!==cfi))
           }
           this.setIsBookmark(false)
      },
      restore(){
          //归位
          setTimeout(()=>{
              this.$refs.bookmark.style.top=`${-this.height}px`
              this.$refs.iconDown.transform='rotate(0deg)'
          },200)
          if(this.isFixed){
             this.setIsBookmark(true)
             this.addBookmark()
          }else{
              this.setIsBookmark(false)
              this.removeBookmark()
          }
      },
      Height(){
          //状态1未超过书签高度
          if (this.isBookmark) {
          this.text = this.$t("book.pulldownDeleteMark");
          this.color = BLUE;
          this.isFixed=true
        } else {
          this.text = this.$t("book.pulldownAddMark");
          this.color = WHITE;
          this.isFixed=false
        }
      
      },
      beforeHeight(v){
           //状态2:未到达临界状态
        this.$refs.bookmark.style.top = `${-v}px`;
       this.Height()

        const iconDown = this.$refs.iconDown;
        if (iconDown.style.transform === "rotate(180deg)") {
          iconDown.style.transform = "rotate(0deg)";
        }
        
      },
      AfterHeight(v){
             //状态3:到达临界状态
        this.$refs.bookmark.style.top = `${-v}px`;
        if (this.isBookmark) {
          this.text = this.$t("book.releaseDeleteMark");
          this.color = WHITE;
          this.isFixed=false
        } else {
          this.text = this.$t("book.releaseAddMark");
          this.color = BLUE;
          this.isFixed=true
        }
        const iconDown = this.$refs.iconDown;
        if (
          iconDown.style.transform === "" ||
          iconDown.style.transform === "rotate(0deg)"
        ) {
          iconDown.style.transform = "rotate(180deg)";
        }
         
      }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/global.scss";
.ebook-bookmark {
  position: absolute;
  top: px2rem(-35);
  left: 0;
  z-index: 200;
  width: 100%;
  height: px2rem(35);
  .ebook-bookmark-text-wrapper {
    position: absolute;
    right: px2rem(45);
    bottom: 0;
    display: flex;
    .ebook-bookmark-down-wrapper {
      font-size: px2rem(14);
      color: white;
      transition: all $animationTime $animationType;
      @include center;
    }
    .ebook-bookmark-text {
      font-size: px2rem(14);
      @include center;
    }
  }
  .ebook-bookmark-icon-wrapper {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: px2rem(15);
  }
}
</style>
